<template>
    <el-row class="m-header" :gutter="0">
        <el-col :span="5">
            <geo/>
        </el-col>
        <el-col :span="5">
            <user/>
        </el-col>
        <el-col :span="14">
            <nav-bar/>
        </el-col>
    </el-row>
</template>

<script>
import Geo from './geo.vue'
import User from './user.vue'
import NavBar from './nav.vue'
export default {
    components: {
        Geo,
        User,
        NavBar
    }
}
</script>

<style lang="scss">
    @import "@/assets/css/public/layout.scss";
    .m-header {
      background: #F8F8F8;
      height: 40px;
      line-height: 40px;
        .m-geo {
        color: #666;
        font-size: 12px;

        .changeCity {
            background: #F4F4F4;
            border: 1px solid #E5E5E5;
            border-radius: 2px;
            color: #666;
            margin: 0 4px;
            padding: 0 2px;

            &:hover {
            color: #31BBAC;
            }
        }

        .username {
            color: #31BBAC;
            cursor: pointer;
        }

        .login,
        .register {
            font-size: 12px;
            line-height: 40px;
            color: #999;
            margin: 0 5px;

            &.login {
            color: #31BBAC;
            margin: 0 5px 0 20px;
            }

            &:hover {
            color: #31BBAC;
            }
        }
      }
    }
</style>


